html {
  font-size: 16px;
}
body {
  background-color: #0d1a2e;
}
h1 {
  color: #fff;
  font-size: 2rem;
  text-align: center;
}

@function createShadow($n) {
  $shadow: "#{random(100)}vw #{random(100)}vh #fff";
  @for $i from 2 through $n {
    $shadow: "#{$shadow},#{random(100)}vw #{random(100)}vh #fff";
  }
  @return unquote($shadow);
}
$duration:100s;
$count: 300;
@for $i from 1 through 3 {
  $count: floor($count / 2);
  $duration:floor($duration/2);
  .sky#{$i} {
    $size: #{$i}px;
    position: fixed;
    top: 0;
    left: 0;
    width: $size;
    height: $size;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: createShadow($count);
    animation: moveup #{$duration} linear infinite;
    &::after {
      content: " ";
      position: fixed;
      left: 0;
      top: 100vh;
      width: inherit;
      height: inherit;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}
@keyframes moveup {
  100% {
    transform: translateY(-100vh);
  }
}
